import React,{useState,useEffect} from 'react';
import './styles/xiang.css'; 
import { LeftOutlined,RightOutlined } from '@ant-design/icons';
import {useNavigate} from 'react-router-dom'

const HotelInfoCard = () => {
    const navigate=useNavigate()
    const [list]=useState(JSON.parse(localStorage.getItem('list')) ||{})
  return (
    <div className="hotel-info-card">
      <div className="header">
       <span onClick={()=>navigate('/tan')}><LeftOutlined /></span>
        <h2 style={{marginLeft:'10rem'}}>{list.name}</h2>
      </div>
      <div className="hotel-shi">
        <div className="hotel-s">
          <span><svg t="1740451027423" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5423" width="200" height="200"><path d="M503.23456 885.82144l-14.04928-14.15168C478.02368 860.38528 215.49056 593.92 215.49056 434.7904c0-163.55328 129.29024-296.61184 288.21504-296.61184 158.90432 0 288.21504 132.28032 288.256 294.87104 0.04096 159.0272-271.4624 436.51072-274.20672 439.07072l-14.52032 13.70112z m0.49152-706.6624c-136.33536 0-247.25504 114.688-247.25504 255.65184 0 122.79808 192.7168 335.21664 247.48032 393.09312C563.2 765.62432 751.06304 549.4784 751.02208 433.07008c-0.04096-140.00128-110.98112-253.91104-247.296-253.91104z m1.88416 360.83712c-68.9152 0-125.00992-57.79456-125.00992-128.83968s56.07424-128.8192 125.00992-128.8192c68.89472 0 124.96896 57.79456 124.96896 128.8192s-56.05376 128.83968-124.96896 128.83968z m0-216.6784c-46.34624 0-84.04992 39.40352-84.04992 87.8592s37.70368 87.8592 84.04992 87.8592c46.32576 0 84.00896-39.40352 84.00896-87.8592s-37.6832-87.8592-84.00896-87.8592z" fill="" p-id="5424"></path></svg></span>
      <p>{list.address} Noboribetsu Onsen-cho 203-1, 日本</p>  
      <span><RightOutlined /></span>
        </div>
      <div className="hotel-h">
        <p><svg t="1740451389786" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6444" width="200" height="200"><path d="M273.8176 136.15616l0.44032 0.69632c19.31776 31.2064 45.7472 115.62496 62.45888 181.94944L279.3984 376.1152l-32.86528 32.86528 16.59904 43.4176c3.14368 8.22272 79.4624 202.53184 293.02272 300.65152l45.33248 20.82816 35.2768-35.2768 51.2-51.2c0.28672-0.28672 0.52736-0.512 0.71168-0.68096 0.53248-0.06656 1.38752-0.13824 2.62656-0.13824 2.14528 0 4.67968 0.2048 7.51616 0.60928 31.872 4.55168 140.90752 29.4144 166.67136 38.00064 13.45536 4.48512 16.47616 6.79424 17.90464 21.04832 3.17952 31.76448-11.69408 66.67776-40.80128 95.78496-31.42656 31.42656-65.92 46.05952-108.54912 46.05952-22.8608 0-48.32256-4.27008-75.68384-12.68736-134.98368-41.53344-269.97248-142.44864-401.21344-299.93984C184.14592 487.86944 156.72832 403.2 146.58048 347.5968c-12.36992-67.78368-3.36896-112.82432-0.47616-120.34048 2.56512-6.67136 27.7248-65.84832 119.82336-89.40544 1.39264-0.36352 4.88448-1.2544 7.88992-1.69472m2.85696-71.93088c-10.67008 0-20.57728 2.1504-28.50816 4.17792-110.08 28.16-156.16 99.84-168.96 133.12-18.6112 48.37888-30.72 235.52 122.88 419.84s302.08 281.6 435.2 322.56c36.26496 11.15648 68.34176 15.85664 96.76288 15.85664 75.91424 0 125.70624-33.53088 159.23712-67.05664 46.08-46.08 66.56-102.4 61.44-153.6s-35.84-71.68-66.56-81.92-143.36-35.84-179.2-40.96a124.98432 124.98432 0 0 0-17.65376-1.3312c-25.27744 0-41.39008 9.17504-54.02624 21.8112l-51.2 51.2c-189.44-87.04-256-261.12-256-261.12l61.44-61.44c15.36-15.36 20.48-40.96 15.36-61.44s-38.4-151.04-71.68-204.8c-17.21344-27.80672-39.13728-34.90304-58.53184-34.89792z" fill="#666666" p-id="6445"></path></svg></p>
        <a href="tel:020-123456789">020-123456789</a>
        <p><RightOutlined /></p>
      </div>
      
      </div>


      <div className="hotel-intro">
        <p>酒店介绍</p>
        <p>Noboribetsu Sekisui Tei酒店距离JR登别站（JR Noboribetsu Station）有20分钟车程，距离地狱谷（Jigokudani Valley）有15分钟步行路程。酒店内设有3间公共温泉浴池和免费停车场，并在公共区提供免费网络连接。</p>
        <button className="more-info">点击展开</button>
      </div>
      <div className="hotel-facilities">
        <div className="hotel">
            <h3>酒店设施</h3>
        <li>具有多个主题</li>
        <li>坐落位置优质</li>
        </div>
        
        <hr />
        <div className="hotel-fac">
            <div className="hotel-f">
                <h4>店内设施</h4>
          <ul>
            <li>大堂电脑</li>
            <li>免费WIFI</li>
            <li>自助咖啡机</li>
            <li>自助洗衣房</li>
            <li>自助营养早餐厅</li>
            <li>支持刷卡</li>
          </ul>
            </div>
          <div className="hotel-f">
            <h4>客房设施</h4>
          <ul>
            <li>免费宽带</li>
            <li>电热水壶</li>
            <li>24小时新风循环</li>
            <li>吹风筒</li>
            <li>有线电视</li>
            <li>24小时热水供应</li>
            <li>电话</li>
            <li>冷暖空调</li>
            <li>电子门锁</li>
            <li>叫醒服务</li>
          </ul>
          </div>

        </div>
        
      </div>
    <div className="transportation">
          <h4>交通指引</h4>
          <p>酒店距离新千岁机场（New Chitose Airport）有1小时车程，距离JR札幌站（JR Sapporo station）有2小时车程。在提前预约的情况下，酒店提供往返班车服务。</p>
        </div>
    </div>
  );
};

export default HotelInfoCard;